
<template>
    <div>
      编号 <el-autocomplete
    popper-class="my-autocomplete"
    v-model="resourceName"
    :fetch-suggestions="querySearch"
    placeholder="商铺完整编号"
    @select="handleSelect">
    <i
      class="el-icon-edit el-input__icon"
      slot="suffix"
      @click="handleIconClick">
    </i>
    <template slot-scope="{ item }">
      <div class="name">{{ item.value }}</div>
    </template>
  </el-autocomplete>
      客户姓名 <el-input v-model="feeUser" placeholder="请输入" style="width: 15%;"></el-input>
      状态 <el-select v-model="value1" placeholder="请选择">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      收费项目 <el-select v-model="value2" placeholder="请选择">
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select><br>
      付款方式 <el-select v-model="value3" placeholder="请选择">
      <el-option
        v-for="item in options3"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      <el-button type="primary" @click="Select" icon="el-icon-search">查询</el-button>  
      <el-button type="primary" icon="el-icon-refresh-right" @click="chongzhi">重置</el-button>
      <div>
        <div>
      <el-button type="primary"  @click="addTableVisible=true">预存</el-button>
      <el-button type="primary"  @click="tuihuanTableVisible=true">退还</el-button>
      <!-- 预存 -->
      <el-dialog title="预存" :visible.sync="addTableVisible">
           <el-form :model="yajinruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="编号" prop="resourceName" >
      <el-autocomplete
    popper-class="my-autocomplete"
    v-model="resourceName"
    :fetch-suggestions="querySearch"
    placeholder="商铺完整编号"
    @select="handleSelect" >
    <i
      class="el-icon-edit el-input__icon"
      slot="suffix"
      @click="handleIconClick">
    </i>
    
  </el-autocomplete>
  <el-button type="primary" @click="Selectfeename" icon="el-icon-search">搜索</el-button>
       </el-form-item>
       <el-form-item label="客户名称" prop="feeUser" >
         <el-input
       v-model="this.feeUser1"
       :disabled="true">
     </el-input>
       </el-form-item>
       <el-form-item label="可用收费项" prop="resource">
      <el-radio-group v-model="yajinruleForm.resource">
        <el-radio label="指定收费项"></el-radio>
        <el-radio label="所有收费项"></el-radio>
      </el-radio-group>
    </el-form-item>
       <el-form-item label="收费项目" prop="feeItemName" required>
           <el-select v-model="yajinruleForm.feeItemName" placeholder="请选择">
           <el-option label="测试抄表燃气费" value="测试抄表燃气费"></el-option>
           <el-option label="测试物业费" value="测试物业费"></el-option>
           <el-option label="维修服务费" value="维修服务费"></el-option>
           <el-option label="装修管理服务费" value="装修管理服务费"></el-option>
           <el-option label="取暖费" value="取暖费"></el-option>
           <el-option label="空调费" value="空调费"></el-option>
           <el-option label="公共区域电费" value="公共区域电费"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="付款方式" prop="payType" required>
         <el-select v-model="yajinruleForm.payType" placeholder="请选择">
           <el-option label="现金" value="cash"></el-option>
           <el-option label="微信支付" value="weixin"></el-option>
           <el-option label="支付宝" value="aliPay"></el-option>
           <el-option label="刷卡" value="cardPay"></el-option>
           <el-option label="转账" value="transferPay"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="收费金额" prop="amt" placeholder="请输入" required>
         <el-input v-model="yajinruleForm.amt"></el-input>
       </el-form-item>
       <el-form-item label="收费时间" required>
           <el-form-item prop="operateTime">
           <div class="block">
         <el-date-picker
           v-model="yajinruleForm.operateTime"
           type="date"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="选择日期">
         </el-date-picker>
       </div>
     </el-form-item>
       </el-form-item>
       
       <el-form-item>
         
         <el-button @click="yajinTableVisible=false">取消</el-button>
         <el-button type="primary" @click="addTableVisible=false,add()">确定</el-button>
       </el-form-item>
     </el-form>
         </el-dialog> 
  <!-- 退还 -->
  <el-dialog title="退还" :visible.sync="tuihuanTableVisible">      
         <el-form :model="tuikuanruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="编号" prop="resourceName" >
       <el-input
     v-model="tuikuanruleForm.resourceName"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="客户姓名" prop="feeUser" required>
       <el-input
     v-model="tuikuanruleForm.feeUser"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费项目" prop="feeItemName" required>
       <el-input
     v-model="tuikuanruleForm.feeItemName"
     :disabled="true">
   </el-input>
     </el-form-item>
   
     <el-form-item label="付款方式" prop="payType" required>
      <el-input
     v-model="tuikuanruleForm.payType"
     :disabled="true">
   </el-input>
     </el-form-item>
     <el-form-item label="收费金额" prop="amt" placeholder="请输入" required>
       <el-input v-model="tuikuanruleForm.amt" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="收费时间" required>
         <el-form-item prop="operateTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.operateTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款时间" required>
         <el-form-item prop="refundTime">
         <div class="block">
       <el-date-picker
         v-model="tuikuanruleForm.refundTime"
         type="date"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期">
       </el-date-picker>
     </div>
   </el-form-item>
     </el-form-item>
     <el-form-item label="退款方式" prop="returnpayType" required>
    <el-select v-model="tuikuanruleForm.returnpayType" placeholder="请选择">
      <el-option label="现金" value="cash"></el-option>
      <el-option label="微信支付" value="weixin"></el-option>
      <el-option label="支付宝" value="aliPay"></el-option>
      <el-option label="刷卡" value="cardPay"></el-option>
      <el-option label="转账" value="transferPay"></el-option>
    </el-select>
  </el-form-item>
     <el-form-item label="备注" prop="remark">  
     <el-input type="textarea" v-model="tuikuanruleForm.remark"></el-input>
     </el-form-item>
     <el-form-item>
       
       <el-button @click="tuikuanVisible=false">取消</el-button>
       <el-button type="primary" @click="submittuikuan">确定</el-button>
     </el-form-item>
   </el-form>
       </el-dialog>
  
<!-- 表格 -->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" >
      <el-table-column type="index" label="序号">
      </el-table-column>
      <el-table-column prop="resourceName" label="编号" >
      </el-table-column>
      <el-table-column prop="feeUser" label="客户姓名">
      </el-table-column>
      <el-table-column prop="type" label="状态" show-overflow-tooltip width="100">
          <template slot-scope="s">
                          <el-tag  v-show="s.row.type == 'add'">预存</el-tag>
                          <el-tag  v-show="s.row.type == 'pay'">支付</el-tag>
                          <el-tag  v-show="s.row.type == 'payAdd'">找零结转</el-tag>
                      </template>
      </el-table-column>
      <el-table-column prop="feeItemName" label="收费项目" show-overflow-tooltip >
      </el-table-column>
      <el-table-column prop="payType" label="付款方式" show-overflow-tooltip>
        <template slot-scope="s">
                          <span v-show="s.row.payType == 'cash'">现金</span>
                          <span v-show="s.row.payType == 'cardPay'">刷卡</span>
                          <span v-show="s.row.payType == 'weixin'">微信支付</span>
                          <span v-show="s.row.payType == 'aliPay'">支付宝</span>
                          <span v-show="s.row.payType == 'transferPay'">转账</span>
                          <span v-show="s.row.payType == 'miniapp_weixin'">小程序微信支付</span>
                      </template>
      </el-table-column>
      <el-table-column prop="amt" label="金额" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="operateUser" label="收款人" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="operateTime" label="收款时间" show-overflow-tooltip width="150">
      </el-table-column>
      
      <el-table-column prop="payNo" label="单号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  label="操作" show-overflow-tooltip width="300">
        
        <template>
            <el-button type="text" size="small">打印收款单</el-button>
              <el-button type="text" size="small">打印退换单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">  
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="total" >
              </el-pagination>
  </div>
          </div>
    
  </div>
    </div>
  
  </template>
  
  <script>
   export default {
      data() {
        return {
          ruleForm: {
       
      },
          rules: { 
           
          },
          id:"",
          linshiid:"",
          tuikuanruleForm:{
  
          },
          tuihuanTableVisible:false,
          xiangqinVisible:false,
          addTableVisible:false,
          restaurants: [],
          currentPage: 1,  //默认当前页
              pageSize: 5, //每页显示条数例表
              total: 0,//总条数
          options1: [{//状态
            value: 'add',
            label: '预存'
          }, {
            value: 'payadd',
            label: '找零结转'
          }, {
            value: 'pay',
            label: '支付'
          }
          , {
            value: 'return',
            label: '退还'
          }],
          options2: [{//收费项目
            value: '测试抄表燃气费',
            label: '测试抄表燃气费'
          }, {
            value: '测试物业费',
            label: '测试物业费'
          }, {
            value: '维修服务费',
            label: '维修服务费'
          }, {
            value: '装修管理服务费',
            label: '装修管理服务费'
          }, {
            value: '取暖费',
            label: '取暖费'
          }, {
            value: '空调费',
            label: '空调费'
          }
          , {
            value: '公共区域电费',
            label: '公共区域电费'
          }
          , {
            value: '不指定收费项',
            label: '不指定收费项'
          }
        ],
          options3: [{//付款方式
            value: 'cash',
            label: '现金'
          }, {
            value: 'weixin',
            label: '微信支付'
          }, {
            value: 'aliPay',
            label: '支付宝'
          }, {
            value: 'cardPay',
            label: '刷卡'
          }, {
            value: 'transferPay',
            label: '转账'
          }, {
            value: 'miniapp_weixin',
            label: '小程序微信支付'
          }],
          value1: '',//状态
          value2: '',//收费项目
          value3: '',//付款方式
          resourceName:'',//编号
          feeUser: '',//客户名字
          feeUser1:"",
          tableData:[],//
          yajinruleForm:{},
          tuihuanTableVisible:false,
        };
      },
      methods: {
        yajintuikuan(row){
            this.tuikuanruleForm=row;
          },
          handleSizeChange(val) {
              this.communityList(this.currentPage, val);
          },
          handleCurrentChange(val) {
              this.communityList(val, this.pageSize);
          },
          tuikuan(row){
    console.log(row);
    this.tuikuanruleForm=row;
    this.linshiid=row.id;
            },
          submittuikuan(){
            this.$http.get(
                  "http://localhost:8083/charge/linshituikuanCharge", {
                    params: {id:this.linshiid
                    },
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  this.$http.get(
                  "http://localhost:8083/linshi/Provisional",
                  {
                      params: {
                          pageNum: this.pageNum,
                          pageSize: this.pageSize,
                      },
                  }
              ).then((result) => {
                  let $data = result.data;
                  this.tableData = $data.data.list; //表格数据          
                  this.currentPage = $data.data.pageNum; //当前页          
                  this.pageSize = $data.data.pageSize; //每页显示条数          
                  this.total = $data.data.total;
  
              }).catch((err) => {
                  this.$message.error(err);
              });
              })
              .catch((err)=>{
                  this.$message.error(err);
              });
              this.tuikuanVisible =false
            },
  add(){
    this.$http.post(
                  "http://localhost:8083/advence/add", {
                  resourceName:this.resourceName,
                  feeUser:this.feeUser1,
                  feeItemName:this.yajinruleForm.feeItemName,
                   payType:this.yajinruleForm.payType,
                   amt:this.yajinruleForm.amt,
                  operateTime:this.yajinruleForm.operateTime,     
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  this.$http.get(
                  "http://localhost:8083/advence/yucundeposit",
                  {
                      params: {
                          pageNum: this.pageNum,
                          pageSize: this.pageSize,
                      },
                  }
              ).then((result) => {
                  let $data = result.data;
                  this.tableData = $data.data.list; //表格数据          
                  this.currentPage = $data.data.pageNum; //当前页          
                  this.pageSize = $data.data.pageSize; //每页显示条数          
                  this.total = $data.data.total;
  
              }).catch((err) => {
                  this.$message.error(err);
              });
              })
              .catch((err)=>{
                  this.$message.error(err);
              });
              this.yajinTableVisible=false
            },
  
          Selectfeename(){
              this.$http.get(
                  "http://localhost:8083/deposit/selectfeename", {
                  params: {
                      resourceName:this.resourceName,
                  },
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  let $data = result.data;
                  this.feeUser1 = $data.data.list[0].feeUser;
                
              })
              .catch((err)=>{
                  this.$message.error(err);
              });
          },
          Select(){
              this.$http.get(
                  "http://localhost:8083/advence/select", {
                  params: {
                    resourceName:this.resourceName,
                      feeUser:this.feeUser,
                      type:this.value1,
                      feeItemName:this.value2,
                      payType:this.value3
                  },
              }
              ).then((result) => {
                  console.log(result.status);
                  console.log(result.message);
                  let $data = result.data;
                  this.tableData = $data.data.list;
                  this.currentPage = $data.data.pageNum; //当前页          
                  this.pageSize = $data.data.pageSize; //每页显示条数          
                  this.total = $data.data.total;
              })
              .catch((err)=>{
                  this.$message.error(err);
              });
          },
          communityList(pageNum, pageSize) {
              this.$http.get(
                  "http://localhost:8083/advence/yucundeposit",
                  {
                      params: {
                          pageNum: pageNum,
                          pageSize: pageSize,
                      },
                  }
              ).then((result) => {
                  let $data = result.data;
                  this.tableData = $data.data.list; //表格数据          
                  this.currentPage = $data.data.pageNum; //当前页          
                  this.pageSize = $data.data.pageSize; //每页显示条数          
                  this.total = $data.data.total;
  
              }).catch((err) => {
                  this.$message.error(err);
              });
          },
  
   
          chongzhi(){
          this.value1= "";//状态
          this.value2= "";//收费项目
          this.value3= "";//付款方式
          this. resourceName="";//编号
          this.feeUser="";//客户名字
          this.communityList(this.currentPage, this.pageSize);
          },
        querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
          return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        loadAll() {
          return [
            { "value": "01-A-1-101"},
          ];
        },
        handleSelect(item) {
          this.state=item.value,
          console.log(item);
        },
        handleIconClick(ev) {
          console.log(ev);
        }
        
      },
      mounted() {
        this.restaurants = this.loadAll();
        this.communityList(this.currentPage, this.pageSize);
        
      }
    }
  </script>
  
  <style>
   .pagination-container {  
      display: flex;  
      justify-content: flex-end;  
    }  
  </style>
  